<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>主界面</title>
    <style>
        table{
            margin:0 auto;
            text-align: center;
        }

        h2{
            text-align: center;
        }

        #box{
            margin: 0 auto;
            text-align: center;
        }
    </style>
</head>
<body>
<form th:action="@{/list}" method="get">
    <div id="box">
        <h2>北大青鸟合作供应商联系人</h2>
        <input type="text" name="cname">
        <select name="pid" id="pid">
            <option value="" selected>--请选择--</option>
            <option value="3">小米</option>
            <option value="4">腾讯</option>
            <option value="5">百度</option>
        </select>
        <input type="submit" value="查询">

        <a th:href="@{/add}">添加供应商联系人</a>
    </div>
</form>

<table border="1">
    <tr>
        <td>供应商联系人编号</td>
        <td>供应商联系人姓名</td>
        <td>供应商联系人年龄</td>
        <td>供应商联系人手机</td>
        <td>所属供应商</td>
        <td>创建日期</td>
        <td>操作</td>
    </tr>

    <tr th:each="supplierContact : ${list}">
        <td>[[${supplierContact.id}]]</td>
        <td>[[${supplierContact.cname}]]</td>
        <td>[[${supplierContact.age}]]</td>
        <td>[[${supplierContact.mobile}]]</td>
        <td>
            <span th:if="${supplierContact.pid==3}">小米</span>
            <span th:if="${supplierContact.pid==4}">腾讯</span>
            <span th:if="${supplierContact.pid==5}">百度</span>
        </td>
        <td th:text="${#dates.format(supplierContact.createdate,'yyyy-MM-dd')}"></td>
        <td>
            <input type="button" th:onclick="|del(${supplierContact.id})|" value="删除">
            <a th:href="@{/byId(id=${supplierContact.id})}">修改</a>
        </td>
    </tr>

</table>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:inline="javascript">
    function del(id){
        if (confirm("确定要删除吗？")){
            $.post([[${#request.contextPath}]]+'/delete',{id:id},function (data){
                if (parseInt(data)>0){
                    alert("删除成功！");location.href='list';
                }else{
                    alert("删除失败！");
                }
            })
        }
    }

</script>

</body>
</html>
